Resolve opencollective/opencollective#4341
Resolve opencollective/opencollective#7640

How to use it

After integrating the iframe in your page, simply add this snippet somewhere in your javascript:

window.addEventListener('message', event => {
  if (event.origin === 'https://opencollective.com') {
    console.log(event); // Handle event
  }
});

Message types

All messages have an event property (the type) and a size property, that gives the size of the iframe body when the event was emitted. You can listen for the following events:

• initialized: the page gets mounted
• resized: the page gets resized
• stepChange: the step of the contribution flow changes
• success: the contribution flow was successful. The payload contains the order object, like:

{
  order: {
    id: 1234,
    legacyId: 1234,
    status: 'PENDING',
    frequency: 'ONETIME',
    amount: { value: 1000, valueInCents: 100000, currency: 'USD' },
    platformTipAmount: { value: 100, valueInCents: 10000, currency: 'USD' },
    tier: { id: 1234 }, // `tier` can be null
    fromAccount: { id: 1234 },
    toAccount: { id: 1234 }
  }
}

Preview